<template>
  <div class="registerWrapper" id="registerBackground">
    <div class="formWrapper">
      <h1 class="registerTitle">{{ registerTitle }}</h1>
      <p class="registerSystem">{{ registerSystem }}</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        hide-required-asterisk
      >
        <el-form-item prop="userName">
          <el-input
            prefix-icon="el-icon-user"
            v-model="ruleForm.userName"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input 
          v-model="ruleForm.nickname" 
          placeholder="昵称" 
          prefix-icon="el-icon-coordinate">
        </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input 
          v-model="ruleForm.repassword" 
          placeholder="确认密码"
          show-password
          prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-form-item prop='email'>
          <el-input
            prefix-icon='el-icon-s-comment'
            v-model='ruleForm.email'
            placeholder="邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop='captcha'>
          <el-input v-model="ruleForm.captcha" placeholder="验证码" prefix-icon='el-icon-s-promotion'>
            <el-button slot="append" @click='handleCaptcha'>发送验证码</el-button>
          </el-input>
        </el-form-item>
        <el-form-item class="registerButtonWrapper">
          <el-button
            class="registerButton"
            type="primary"
            @click="submitForm('ruleForm')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register } from '@/request/user.js'
import { sendCaptcha } from '@/request/user.js'


export default {
  name: 'Register',
  components: {  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registerTitle: '注册',
      registerSystem: '欧拉云盘',
      ruleForm: {
        userName: '',
        nickname: '',
        password: '',
        repassword: '',
        email: '',
        captcha: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min:6, max: 20, message: '长度在6到20个字符', trigger:'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 5,
            max: 20,
            message: '长度在 5 到 20 个字符',
            trigger: 'blur'
          }
        ],
        repassword: [
          { validator:validatePass2, trigger: 'blur'}
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur'},
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur'},
        ]
      },
    }
  },
  computed: {
    // url() {
    //   let _url = this.$route.query.Rurl //获取路由前置守卫中next函数的参数，即登录后要去的页面
    //   if (_url) {
    //     //若登录之前有页面，则登录后仍然进入该页面
    //     return _url
    //   } else {
    //     //若登录之前无页面，则登录后进入首页
    //     return '/'
    //   }
    // }
  },
  
  created() {
    if (this.$store.getters.isLogin) {
        // 用户若已登录，自动跳转到首页
        let username = this.$store.getters.username
        this.$message({
          message: username + ' 您已登录！已跳转到首页',
          center: true,
          type: 'success'
        })
        setTimeout(() => this.$router.replace({ name: 'Home' }), 1500)
      }
  },
  methods: {
    handleCaptcha() {
      if (!this.ruleForm.email) {
        this.$message({
          type: 'error',
          message: '请输入邮箱'
        })
      }
      console.log('send email...')
      let data = {
        email: this.ruleForm.email
      }
      sendCaptcha(data, true).then(
        res => {
          if (res.code ==200)
            this.$message({
              message: '发送验证码成功',
              type: 'success'
            })
        }
      )
      },
    //  注册按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //  各项校验通过
          let info = {
            username: this.ruleForm.userName,
            password: this.ruleForm.password,
            email: this.ruleForm.email,
            captcha: this.ruleForm.captcha
          }
          register(info).then(res => {
            console.log('register ok')
            if (res.code != 200) {
              this.$message.error(res.err)
            } else {
              //	这里的返回字段需要和后台重新商议
              this.$notify({
                title: '成功',
                message: '注册成功！已跳转到登录页面',
                type: 'success'
              })
              this.$refs[formName].resetFields();
              this.$router.replace({ path: '/login' })
            }
          })
        } else {
          this.$message.error('请完善信息！')
          return false
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.registerWrapper
  height: 600px !important
  min-height: 500px !important
  width: 100% !important
  padding-top: 50px
  .formWrapper
    width: 375px
    margin: 0 auto
    text-align: center
    .registerTitle
      margin-bottom: 10px
      font-weight: 300
      font-size: 30px
      color: #000
    .registerSystem
      font-weight: 300
      color: #999
    .demo-ruleForm
      width: 100%
      margin-top: 20px
      >>> .el-form-item__content
        margin-left: 0 !important
      &>>> .el-input__inner
        font-size: 16px
      .registerButtonWrapper
        .registerButton
          width: 100%
        &>>> .el-button
          padding: 10px 90px
          font-size: 16px
    .tip
      width: 70%
      margin-left: 86px
</style>
